<template>
	<div>
		<van-row type="flex"> <!-- 添加flex布局类型 -->
			<!--左侧分类-->
			<van-col span="6" class="nav-column"> <!-- 添加列样式类 -->
				<van-sticky :offset-top="46">
					<van-sidebar v-model="activeKey">
						<van-sidebar-item v-for="(item,i) in categoryList" :title="item.name" @click="onClickLeftMenus(item.id)" />
					</van-sidebar>
				</van-sticky>
			</van-col>
			
			<!-- 右侧商品列表 -->
			<van-col span="18" class="content-column"> <!-- 添加列样式类 -->
				<!-- 下拉刷新组件 -->
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<!-- 列表组件 -->
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"
						:offset="0">
						<!-- 商品卡片列表 -->
						<van-card v-for="(item,i) in productList" :key="i" :price="item.price" :num="item.sold_count"
							:desc="item.spec" :title="item.title" :thumb=" APIDomainName + item.pic"
							@click="onDetail(item.id)"></van-card>
					</van-list>
				</van-pull-refresh>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	//1.导入封装后的接口  
	import { getProductListAPI } from "@/api/product.js";
	import { getCategoryListAPI } from "@/api/category.js"

	export default {
		data() {
			return {
				productList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表
				category_id: null,

				//左侧 导航栏
				activeKey: 0,

				pageIndex: 0, //页码
				pageSize: 8, //页大小
				pageTotal: 0, //总页数

				/* 上拉加载状态控制变量	 */
				loading: false,
				finished: false,

				//下拉刷新状态控制变量
				refreshing: false,
			}
		},

		//生命周期的钩子函数
		created() {
			// 获取左侧导航的分类内容
			getCategoryListAPI().then(result => {
				console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.onRefresh(); // 刷新
			});
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.pageIndex = 0; //重置页码        
				this.finished = false; //重置未完成
				this.refreshing = true;
				// 重新加载数据,将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},

			// 上拉加载每次1页
			onLoad() {
				// 异步更新数据
				this.pageIndex += 1; //页码递增
				let category_id = this.category_id; //商品分类id
				let pageIndex = this.pageIndex;
				let pageSize = this.pageSize; //页大小       
				getProductListAPI({
					category_id,
					pageIndex,
					pageSize
				}).then((result) => {
					console.log(result); //调式输出，看数据结构
					this.pageTotal = result.pageTotal; //总页数

					//如果是正在下拉刷新中
					if (this.refreshing) {
						this.productList = []; //清空
						this.refreshing = false;
					}

					if (result.data.length > 0) {
						this.productList = this.productList.concat(result.data); //数据拼接
					}

					// 设置本次上拉加载状态结束
					this.loading = false;

					// 判断是否数据全部加载完成
					if (this.pageIndex >= this.pageTotal) {
						this.finished = true;
					}
				});
			},

			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.category_id = category_id; //更新分类id
				this.onRefresh(); //刷新
			},

			// 导航跳转到商品详情页面
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					query: { id },
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
    // 左侧导航栏样式
    .van-sidebar {
        background: #fff;
        width: 28vw;
        
        .van-sidebar-item {
            color: #333;
            font-size: 14px;
            margin: 10px 0;
            transition: all 0.3s;
            
            &--active {
                background: #1a1a1a !important;
                color: #fff !important;
                border-left: 4px solid #ffd700;
                margin-left: -4px;
                box-shadow: 2px 0 8px rgba(0,0,0,0.1);
            }
        }
    }

    // 右侧商品卡片全面改造
    /deep/ .van-card {
        background: linear-gradient(145deg, #ffffff, #f8f9fa);
        border-radius: 16px;
        margin-bottom: 20px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: visible;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
        }

        // 商品图片样式
        &__thumb {
            width: 120px !important;
            height: 120px !important;
            border-radius: 12px;
            overflow: hidden;
            margin: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            
            img {
                transition: transform 0.3s ease;
            }
            
            &:hover img {
                transform: scale(1.08);
            }
        }

        // 内容区域样式
        &__content {
            padding: 16px;
            min-height: 160px;
            
            // 商品标题
            &-title {
                font-size: 16px;
                line-height: 1.4;
                color: #2c3e50;
                font-weight: 600;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                margin-bottom: 12px;
            }

            // 商品规格
            &-desc {
                font-size: 13px;
                color: #7f8c8d;
                line-height: 1.3;
                margin-bottom: 8px;
            }

            // 价格区域
            &-price {
                position: relative;
                font-size: 20px;
                color: #e74c3c !important;
                font-weight: 800;
                
                &::before {
                    content: "¥";
                    font-size: 0.8em;
                    margin-right: 2px;
                }
                
                // 价格装饰线
                &::after {
                    content: "";
                    position: absolute;
                    bottom: -4px;
                    left: 0;
                    width: 40px;
                    height: 2px;
                    background: #e74c3c;
                }
            }

            // 销量样式
            &-num {
                font-size: 12px;
                color: #95a5a6;
                margin-top: 8px;
            }
        }
    }

    // 添加全局溢出控制
    div {
        overflow-x: hidden;
    }

    // 修正布局容器
    .van-row {
        width: 100%; // 改为百分比宽度
        overflow: hidden;
        
        .nav-column {
            flex: 0 0 28vw;
            max-width: 28vw; // 添加最大宽度限制
        }
        
        .content-column {
            flex: 1;
            min-width: 0;
            padding-right: 10px; // 添加右边距补偿
        }
    }

    // 调整商品卡片边距
    /deep/ .van-card {
        margin: 0 8px 20px; // 减小左右边距
        width: calc(100% - 16px); // 补偿边距
    }
</style>